<template>
    <div class="register">
        <div class="top">
            <div class="title">{{ hospitalStor.hospitalInfo.hospital?.hosname }}</div>
            <div class="level">
                <svg t="1697080849623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="4037" width="16" height="16">
                    <path
                        d="M279.808 647.4752c0-72.2944 0.4608-144.5888-0.3072-216.832-0.2048-21.0432 7.3728-32.0512 27.8016-39.1168 78.0288-26.8288 124.16-83.6096 146.8416-161.4336 7.8848-27.0848 15.1552-54.5792 26.1632-80.384 17.8688-41.8304 50.688-56.5248 96.256-46.7968 35.1744 7.5264 57.344 37.5808 57.7024 79.6672 0.4608 53.6576 0.0512 107.3152 0.2048 160.9728 0.1024 29.3888 5.2224 35.4304 35.2256 35.7376 60.3648 0.6656 120.7808 2.048 181.0432-0.3072 53.6576-2.0992 92.672 32.8704 79.1552 92.672-16.1792 71.6288-36.608 142.336-56.576 213.0944-12.288 43.6224-26.7264 86.6816-40.8576 129.7408-18.688 56.9856-53.5552 82.176-112.4352 82.176H324.352c-42.496 0-44.5952-2.048-44.5952-43.5712 0.0512-68.5056 0.0512-137.0624 0.0512-205.6192z"
                        fill="#FF8E12" p-id="4038"></path>
                    <path
                        d="M215.1936 645.888c0 70.0416 0.1536 140.1344-0.1024 210.176-0.1024 34.4576-6.5024 40.5504-40.2432 40.6528-9.6768 0.0512-19.3536 0.0512-29.0816 0-39.5776-0.2048-58.368-18.6368-58.5728-59.1872-0.4096-73.0112-0.1536-146.0736-0.1536-219.136 0-53.6576-0.2048-107.3152 0.1024-160.9728 0.256-42.6496 20.8896-63.0272 62.9248-63.1808 65.0752-0.256 65.0752-0.256 65.0752 63.8464 0.1024 62.5664 0.1024 125.184 0.0512 187.8016zM883.0976 388.5568c0-1.9456-0.1024-3.84-0.1536-5.7856-9.8304-2.8672-20.6336-4.1984-32.1536-3.7888-60.2624 2.3552-120.6784 0.9728-181.0432 0.3072-29.952-0.3072-35.1232-6.3488-35.2256-35.7376-0.1536-53.6576 0.256-107.3152-0.2048-160.9728-0.3584-42.0864-22.5792-72.1408-57.7024-79.6672-45.568-9.7792-78.3872 4.9664-96.256 46.7968-11.008 25.8048-18.2784 53.3504-26.1632 80.384-22.6816 77.8752-68.8128 134.6048-146.8416 161.4336-20.48 7.0656-28.0576 18.0736-27.8016 39.1168 0.768 72.2944 0.3072 144.5376 0.3072 216.832v205.6704c0 41.5232 2.0992 43.5712 44.5952 43.5712h222.6176c197.4784-84.0704 336.0256-279.9616 336.0256-508.16z"
                        fill="#FCA315" p-id="4039"></path>
                    <path
                        d="M150.1696 394.1888c-42.0352 0.1536-62.72 20.5824-62.9248 63.1808-0.3072 53.6576-0.1024 107.3152-0.1024 160.9728 0 39.3728-0.0512 78.7456-0.0512 118.1184 30.2592 5.12 61.3376 7.9872 93.0304 7.9872 11.8272 0 23.5008-0.512 35.1232-1.2288 0-32.4608-0.0512-64.9216-0.0512-97.3824V458.0352c0.0512-64.0512 0-64.1024-65.024-63.8464zM699.4944 379.648c-9.9328-0.1024-19.8144-0.256-29.7472-0.3584-29.952-0.3072-35.1232-6.3488-35.2256-35.7376-0.1536-53.6576 0.256-107.3152-0.2048-160.9728-0.3584-42.0864-22.5792-72.1408-57.7024-79.6672-45.568-9.7792-78.3872 4.9664-96.256 46.7968-11.008 25.8048-18.2784 53.3504-26.1632 80.384-22.6816 77.8752-68.8128 134.6048-146.8416 161.4336-20.48 7.0656-28.0576 18.0736-27.8016 39.1168 0.768 72.2944 0.3072 144.5376 0.3072 216.832v87.8592c194.7648-35.584 353.8944-173.2608 419.6352-355.6864z"
                        fill="#FCB138" p-id="4040"></path>
                    <path
                        d="M582.7584 104.4992c-1.9968-0.6144-4.0448-1.1264-6.144-1.5872-45.568-9.7792-78.3872 4.9664-96.256 46.7968-11.008 25.8048-18.2784 53.3504-26.1632 80.384-22.6816 77.8752-68.8128 134.6048-146.8416 161.4336-20.48 7.0656-28.0576 18.0736-27.8016 39.1168 0.2048 21.4528 0.3072 42.9056 0.3584 64.3584 154.3168-74.0864 268.8-217.856 302.848-390.5024zM150.1696 394.1888c-42.0352 0.1536-62.72 20.5824-62.9248 63.1808-0.2048 29.952-0.2048 59.8528-0.2048 89.7536 44.4416-3.6352 87.3472-12.544 128.2048-26.112v-62.976c0-64.0512-0.0512-64.1024-65.0752-63.8464z"
                        fill="#FFC65E" p-id="4041"></path>
                </svg>
                <span>{{ hospitalStor.hospitalInfo.hospital?.param.hostypeString }}</span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <img :src="`data:image/jpeg;base64,` + hospitalStor.hospitalInfo.hospital?.logoData">
            </div>
            <div class="right">
                <div class="rule">挂号规则</div>
                <div class="time">
                    <span>预约周期：{{ hospitalStor.hospitalInfo.bookingRule?.cycle }}天</span>
                    <span>放号时间：{{ hospitalStor.hospitalInfo.bookingRule?.releaseTime }}</span>
                    <span>停挂时间：{{ hospitalStor.hospitalInfo.bookingRule?.quitTime }}</span>
                </div>
                <div class="address">
                    具体地址：{{ hospitalStor.hospitalInfo.hospital?.param.fullAddress }}
                </div>
                <div class="route">
                    规划路线：{{ hospitalStor.hospitalInfo.hospital?.route }}；更多路线详见须知。
                </div>
                <div class="quitTime">
                    退号时间：就诊前一工作日{{ hospitalStor.hospitalInfo.bookingRule?.quitTime }}前取消
                </div>
                <div class="rule">医院预约规则</div>
                <div class="ruleInfo" v-for="(item, index) in hospitalStor.hospitalInfo.bookingRule?.rule " :key="index">
                    {{ index + 1 }} 、{{ item }}
                </div>
            </div>
        </div>
        <!-- 展示科室信息 -->
        <div class="bottom">
            <div class="bottom_left">
           <el-tabs :tab-position="tabPosition" class="demo-tabs">
                <el-tab-pane v-for="(deparment,index) in hospitalStor.departmentArr" :key="deparment.depcode" :label="deparment.depname ">
                    <h1>{{ deparment.depname }}</h1>
                    <ul  class="deparmentInfo" >
                        <li v-for="item in deparment.children" :key="item.depcode" @click="showlogin(item)">{{ item.depname }}</li>
                    </ul>
                </el-tab-pane>
            </el-tabs>
            </div>
            <div class="bottom_right">

            </div>

        </div>
    </div>
</template>

<script lang="ts" setup>
import useDetailStore from "../../../store/modules/hospitalDetail";
import { useRoute,useRouter } from "vue-router";
import { ref } from 'vue'
    //获取路由器
    let $router = useRouter();
    // 获取路由对象
    let $route = useRoute(); 

    // 获取user仓库的数据(visiable)可以控制login组件的对话框的显示与隐藏
    import useUserStore from "../../../store/modules/user";
    let useStore = useUserStore();
    // 点击登录与注册按钮的时候弹出对话框
    // item为医院选中科室的数据
    const showlogin = (item:any) =>{
        // useStore.visiable = true;
        // 点击科室按钮，进入到相应的预约挂号详情页面
        // 跳转到预约挂号详情页面
        $router.push({path:'/hospital/register_step1',query:{hoscode:$route.query.hoscode,depcode:item.depcode}})
    }
const tabPosition = ref('left')
let hospitalStor = useDetailStore();
</script>

<style lang="scss" scoped>
.register {
    margin-top: 25px;

    .top {
        display: flex;

        .title {
            font-size: 25px
        }

        .level {
            color: #a7abb7;
            margin-left: 10px;
            height: 40px;
            line-height: 40px;
            text-align: center;

            span {
                margin-left: 10px;
            }
        }
    }

    .content {
        display: flex;

        .left {
            width: 70px;
            display: flex;
            justify-content: center;

            img {
                height: 70px;
                width: 70px;
                border-radius: 50%;
            }
        }

        .right {
            margin-left: 20px;
            color: #a7abb7;

            .rule {
                color: black;
                margin-top: 10px;
            }

            .time {
                margin-top: 20px;

                span {
                    margin-right: 15px;
                }
            }

            .address,
            .route,
            .quitTime,
            .ruleInfo {
                margin-top: 10px;
            }
        }
    }
    .bottom{
        margin-top: 30px;
        .bottom_left{
            height: 500px;
            .demo-tabs{
                overflow: auto;
                height: 100%;
                color: #a7abb7;
                           h1{
                line-height: 40px;
                background: #f1f1f1;
                color: black;
            }
            ul{
                
                display: flex;
                flex-wrap: wrap;
                
                li{
                    width: 33%;
                    line-height: 30px;
                    cursor:pointer;
                }
            } 
            }

        }
    }
}</style>